<template>
	<view class="pay">
		<view class="pay_top">￥{{realityPrice.toFixed(2)}}</view>
		<view class="pay_center">
			<view class="center_left">收款方</view>
			<view class="center_right">订花乐平台</view>
		</view>
		<view class="pay_bottom" @click="show =true">立即支付</view>
		<key-words :mix="true" :show_key="show" :price="realityPrice.toFixed(2)" @closeFuc="closeFuc"
			@getPassword="getPassword"></key-words>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import keyWords from "@/components/bian-keywords/index.vue"
	export default {
		components: {
			keyWords
		},
		data() {
			return {
				show: false,
				id: null,
				realityPrice: 0,
				pass: '000000'
			}
		},
		onLoad(options) {
			this.id = options.id
			this.realityPrice = Number(options.total)
		},
		methods: {
			closeFuc() {
				this.show = false
			},
			async getPassword(e) {
				if (e.password == this.pass) {
					await uni.$http.put(`/api/order/${this.id}`, {
						status: "2"
					})
					this.$refs.uToast.show({
						type: 'success',
						message: "支付成功",
						duration: 1000,
						position: "center",
						complete: () => {
							uni.navigateBack()
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: "密码错误",
						duration: 1000,
						position: "center",
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		height: 95vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f8f8f8;

		.pay_top {
			font-weight: 700;
			font-size: 30px;
			margin-top: 50px;
		}

		.pay_center {
			width: 100%;
			display: flex;
			justify-content: space-between;
			line-height: 50px;
			background-color: #fff;
			border-top: 0.5px solid #dedede;
			border-bottom: 0.5px solid #dedede;
			margin-top: 30px;
			padding: 0 30px;
			box-sizing: border-box;

			.center_left {
				color: #888;
				font-size: 14px
			}

			.center_right {
				font-weight: 600;
				font-size: 15px;
			}
		}

		.pay_bottom {
			width: 94%;
			line-height: 50px;
			text-align: center;
			background-color: #00c800;
			color: #fff;
			margin-top: 30px;
			border-radius: 7px;
		}


		.pass_box {
			display: flex;
			justify-content: space-between;
			padding: 10px;

			.pass_item {
				width: 14%;
				height: 50px;
				text-align: center;
				background-color: #fff;
				font-size: 20px;
			}
		}
	}
</style>